<template>
  <div>
    <el-breadcrumb
      style="margin: 5px 0px 0px 30px"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item :to="{ path: '/userInformation' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item>店铺信息</el-breadcrumb-item>
    </el-breadcrumb>
    <ul class="shopList">
      <li>
        <b>店铺名称</b
        ><input
          type="text"
          placeholder="请输入店铺名称"
          v-model="user.shopname"
        /><button v-on:click="modify">修改</button>
      </li>
      <li>
        <b>店铺地址</b
        ><input
          type="text"
          placeholder="请输入店铺地址"
          v-model="user.shopaddress"
        /><button v-on:click="modify">修改</button>
      </li>
      <li>
        <b>店铺邮编</b
        ><input
          type="text"
          placeholder="请输入店铺邮编"
          v-model="user.zipcode"
        /><button v-on:click="modify">修改</button>
      </li>
      <li>
        <b>商品类别</b
        ><select v-model="changeFol">
          <option v-for="item in foList" :key="item.foId" :value="item.foId">
            {{ item.foname }}
          </option></select
        ><button v-on:click="delFol">删除</button>
      </li>
      <li>
        <b>输入品类</b
        ><input
          type="text"
          placeholder="请输入品类名称"
          v-model="enterCategory"
        /><button @click="addCl">添加</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  created() {
    this.getShopMessage();
  },
  mounted() {},
  watch: {
    foList() {
      this.setSelect();
    },
  },
  data() {
    return { user: {}, foList: [], changeFol: null, enterCategory: null };
  },
  methods: {
    open2() {
      this.$message({
        message: "操作成功！",
        type: "success",
      });
    },
    getShopMessage() {
      let that = this;
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
      let userId = this.user.userId;
      let userToken = this.user.token;
      // 获取用户信息
      this.$http
        .get(
          "FoodWeb/getUserInfoAction.action",
          { params: { userid: userId, token: userToken } },
          { dataType: "json" }
        )
        .then((res) => (that.user = res.data.user));
        
      this.$http
        .get(
          "FoodWeb/getFoListAction.action",
          { params: { userid: userId, token: userToken } },
          { dataType: "json" }
        )
        .then((res) => (that.foList = res.data.foList));
    },
    getInformation() {},
    setSelect() {
      this.changeFol = this.foList[0].foId;
    },
    modify() {
      let that = this;
      let shopname = this.user.shopname;
      let shopaddress = this.user.shopaddress;
      let zipcode = this.user.zipcode;
      this.$http
        .get("FoodWeb/modifySellerInfoAction.action", {
          params: {
            shopname: shopname,
            shopaddress: shopaddress,
            zipcode: zipcode,
            userid: that.user.userId,
            token: that.user.token,
          },
          header: { "content-type": "json" },
        })
        .then((res) => {
          that.open2();
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        });
    },
    delFol() {
      let that = this;
      this.$http
        .get("FoodWeb/deleteFoAction.action", {
          params: {
            foid: this.changeFol,
            userid: this.user.userId,
            token: this.user.token,
          },
          header: { "content-type": "json" },
        })
        .then((res) => {
          that.open2();
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        });
    },
    addCl() {
      let that = this;
      this.$http
        .get("FoodWeb/addFoAction.action", {
          params: {
            fotype: 0,
            foname: this.enterCategory,
            userid: that.user.userId,
            token: that.user.token,
          },
          header: {
            "content-type": "json",
          },
        })
        .then((result) => {
          that.open2();
          setTimeout(() => {
            window.location.reload();
          }, 3000);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.shopList {
  display: flex;
  width: 600px;
  flex-direction: column;
  list-style: none;
  margin: 70px auto 0px;
  li {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      width: 300px;
      height: 30px;
    }
    select {
      width: 308px;
      height: 36px;
    }
    button {
      width: 30px;
      height: 35px;
      background-color: #e31939;
      width: 120px;
      border-radius: 0.4em;
      color: white;
      font-weight: inherit;
    }
  }
  // li:nth-of-type(odd) {
  //   background-color: #f8f8f8;
  // }
}
</style>
